<template>
    <div class="phenomenon">
        <div class="headerBox">
            <div class="header">
                <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.push('./register')"></x-icon>
                选择违章现象
            </div>
        </div>
        <ztree
            :data="data"
            @nodeClick="nodeClick"
            :name="'departName'"
            style="margin-top:40px"
            >
        </ztree>
        <div v-transfer-dom>
            <popup v-model="classValue" width="100%" height="100%">
                <div class="headerBox">
                    <div class="header" id="header">
                        <span id="left" @click="classValue=false">
                            <x-icon type="ios-arrow-back" size="30"  class="icon-white" ></x-icon>返回
                        </span>
                        违章现象
                    </div>
                    <div class="alertMain">
                        <h1>{{title}} </h1>
                        <ul v-for="(item,index) in list" :key="index">
                            <li @click="chooese(item)">{{item.weizPhenItem}} </li>
                        </ul>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>
<script>
import ztree from "./tree/index"
//   import VueBetterScroll from "vue2-better-scroll"
import {TransferDom, Popup} from 'vux'
export default {
    data(){
        return {
            data:[],
            classValue:false,
            list:[],
            pamars:{
                classifyID:'',
                skipCount:'0',
                maxResultCount:'1000'
            },
            title:''
        }
    },
    directives:{
        TransferDom
    },
    components: {
        ztree,Popup,
    },
    created(){
        this.examinedUnits()
    },
    mounted(){
        
    },
    methods:{
      // 单位树数据
      examinedUnits(){  
          this.$axiosAjax.weizPhenoList({parentId:0}).then((res) => {
            if(res.data.success==true){
                console.log(res,11)
                this.data=res.data.result.data;
            }
          }).catch((err)=>{
            console.log(err)
          })
      },
      // 点击单位树
      nodeClick(item){
        this.title=item.weizName
        this.classValue=true
        var pamars={
            classifyID:item.classifyID,
            skipCount:'0',
            maxResultCount:'1000'
        }
        this.$axiosAjax.phenomenonList(pamars).then((res) => {
            if(res.data.success==true){
                this.list=res.data.result.items;
            }
          }).catch((err)=>{
            console.log(err)
          })
      },
      // 点击选择后跳回 违章登记页面
      chooese(val){
          console.log(val,2)
          if (val){
            window.sessionStorage.setItem('id',val.id)
            window.sessionStorage.setItem('weizName',val.weizPhenItem)
            window.sessionStorage.setItem('weizNo',val.weizNo)
          }
          this.$router.push('./register')
      }
    }
}
</script>
<style lang="less">
.phenomenon{
    position: relative;
   
}
#header{
    #left{
        position: absolute;
        padding-left: 22px;
        left: 0px;
        color: #fff;
        font-size: 14px;
    }
}
.alertMain{
    height: 627px;
    overflow-y: scroll;
    background-color: #fff;
    padding: 0 20px;
    h1{
        width: 100%;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        border-bottom: 1px solid #dcdada;
    }
    ul{
        li{
            border-bottom: 1px solid #dcdada;
            padding:10px 20px;
            line-height: 20px;
        }
    }
}
</style>

